<template>
  <div class="pages">
      <div id="imgContainer">
          <img :src="item.img"  v-for="(item,index) in imgList" :key="index" alt="" @click="gosearch" :data-lunbo="item.name">
      </div>
  </div>
</template>

<script>
  import {nextTick, onMounted, reactive, toRefs} from 'vue'
  export default {
      name: "sfcs",
      setup(){
          const data = reactive ({
              time:null,
              imgList:[
                  {
                    name:'红玫瑰',
                      img:require('./images/today01.jpg'),
                  },
                  {
                    name:'白玫瑰',
                    img:require('./images/today02.jpg'),
                  },
                  {
                    name:'铃兰花',
                    img:require('./images/today03.jpg'),
                  },
                  {
                    name:'老庄树苗',
                    img:require('./images/today04.jpg'),
                  },
                  {
                    name:'蔷薇',
                    img:require('./images/today05.jpg'),
                  },
                  {
                    name:'赤丹花',
                    img:require('./images/today06.jpg'),
                  },
                  {
                    name:'蓝玫瑰',
                    img:require('./images/today07.jpg'),
                  }
              ],
              pn:null,
              imgArr:[],
              w:290,  //每个元素的宽度
              h:240,  //每个元素的高度
              y:40,   //距离顶部的距离
              x:200,   // 距离左边的距离
              r:550,  // 旋转半径
              dv:0.01, //旋转速度
              rh:10,  // 前面和后面的元素高度差
          })
          onMounted(() => {
              nextTick(() => {
                  data.time = imgRound("imgContainer",data.w,data.h,data.x,data.y,data.r,data.dv);
                  setInterval(()=>{roundMove()},20)
              })
          })
          const imgRound = (id,w,h,x,y,r,dv,rh,ah)=>{
              if (ah==undefined) ah=1;
              // if (rh==undefined) rh=10;
              var dv=dv*ah; //旋转速度
              data.pi=3.1415926575;
              data.d=data.pi/2;
              data.pd=Math.asin(w/2/r);
              data.smove=true;
              data.imgArr=new Array();
              var objectId=id;
              var o=document.getElementById(objectId);
              o.style.position="relative";
              var arrimg=o.getElementsByTagName("img");
              data.pn=arrimg.length; //图片数量
              data.ed=data.pi*2/data.pn;
              for (let n=0;n<arrimg.length;n++){
                  var lk=arrimg[n].getAttribute("link");
                  if (lk!=null) arrimg[n].setAttribute("title",lk)
                  arrimg[n].onclick=function(){
                      if (this.getAttribute("link")!=null){
                          if (this.getAttribute("target")!="_blank") window.location=(this.getAttribute("link"))
                          else window.open(this.getAttribute("link"))
                      }
                  }
                  arrimg[n].onmouseout=function(){data.smove=true;}
                  arrimg[n].onmouseover=function(){data.smove=false;}
                  arrimg[n].style.position="absolute";
                  data.imgArr.push(arrimg[n]);
              }
              roundMove()
          }
          const roundMove = () => {
              // let r = 190       // 旋转半径
              // let x = 200     // 距离左边的距离
              let rh = 10     // 前面和后面的元素高度差
              // let y = 40     //距离顶部的距离
              // let h = 140    //每个元素的高度
              // let dv = 0.01   //旋转速度
              for (let n=0;n<=data.pn-1;n++){
                  var o=data.imgArr[n];
                  var ta=Math.sin(data.d+data.ed*n),strFilter;
                  if (ta<0) o.style.left=Math.cos(data.d+data.ed*n-data.pd)*data.r+data.x+30+"px";
                  else o.style.left=Math.cos(data.d+data.ed*n+data.pd)*data.r+data.x+30+"px";
                  o.style.top=ta*data.rh+data.rh+data.y+"px";
                  var zoom=Math.abs(Math.sin((data.d+data.ed*n)/2+data.pi/4))*0.5+0.5;
                  o.style.width=Math.abs(Math.cos(data.d+data.ed*n+data.pd)-Math.cos(data.d+data.ed*n-data.pd))*zoom*data.r+"px";
                  o.style.height=zoom*data.h+"px";
                  if (ta<0) {ta=(ta+1)*80+20;o.style.zIndex=0;}
                  else {ta=100;o.style.zIndex=1}
                  if (o.style.zIndex<=0) strFilter="FlipH(enabled:true)"
                  else strFilter="FlipH(enabled:false)";
                  strFilter=strFilter+" alpha(opacity="+ta+")";
                  o.style.opacity=ta/100;
                  o.style.filter=strFilter;
              }
              if (data.smove) data.d=data.d+data.dv;
          }
          return {
              ...toRefs(data),
              imgRound,
              roundMove,
          }
      },
      methods:{
        gosearch(event){
          let element = event.target;
          let {lunbo} = element.dataset;
          console.log(111);
          if(lunbo){
            let location ={
                name:'Search'  ,
                params: { keyword: lunbo  },
            }
          
            this.$router.push(location);
          }
        }
      }
  }
</script>

<style lang="less" scoped>
.pages{
  width: 800px;
  height: 100%;
  margin-left:530px;
  margin-bottom: 75px;
  perspective: 500px;
  // overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.img{
  position: absolute;
}
  #imgContainer{
      width:100%;height:240px;margin-top: -30px;
  }
  .bot-bg{
      display: flex;flex-direction: column;align-items: center;justify-content: center;margin-top:140px;
  }
</style>
